MouseEvent || KeyboardEvent以及事件兼容问题（5）

Event

MouseEvent

无兼容问题

  • [ ] e.type->存储当前鼠标触发的行为类型” click”;
  • [ ] e.clientX/e.clientY:->当前触发点到（显示的）屏幕左上的坐标值

    兼容问题

  • [ ] MouseEvent->事件本身的获取：（对象标准浏览器中）给方法传递的形参e

IE6~IE8不存在用window.event代替

  • [ ] e.target->事件源，触发哪个元素就存储哪个元素

IE6~IE8不存在用e.srcElement来代替

  • [ ] e.pageX/e.pageY：当前触发点距离body（页面第一屏幕最上端）左上角的坐标

IE6~IE8不存在用clientY+滚动条滚动的高度（e.clientX+document.documentElement.scrollLeft）来代替

1
2
3
4
5
6
document.body.onclick=function(e){
  	e=e||window.event;
  	e.target=e.target||e.scrElement;
  	e.pageY=e.pageY||e.clientX+document.documentElement.scrollLeft||e.clientX+document.body.scrollLeft;    	
  	console.dir(arguments);//MouseEvent
  }

  • [ ] e.preventDefault:阻止浏览器的默认行为
    IE6~IE8不存在用e.returnValue=false来代替
    li:hover伪类不兼容IE6，只有a标签的这个伪类才兼容所有浏览器（但是不想a跳转就要使用e.preventDefault）
    1
    2
    3
    4
    //**href="javascript:;"**
    **href="javascript:void 0;"**
    **href="javascript:void 1;"**直接阻止默认行为
    	<li><a href="javascript:;">1</a></li>
1
2
3
4
5
6
7
8
var linklist=document.getElementsByTagName('a');
    for(var i=0;i<linklist.length;i++){
    	linklist[i].onclick=function(e){
    	e=e||window.event;
    	e.preventDefault?e.preventDefault():e.returnValue=false;	
    	// return false;//和上述代码效果一样，都阻止默认的行为	
    	}
    }

思考：搜索阻止a默认行为的三种写法的区别

  • [ ] e.stopPropagation:阻止事件冒泡传播
    IE6~8不兼容用e.stopPropagation()
    1
    e.stopPropagation?e.stopPropagation():e.cancelBubble=true;

KeyboardEvent

e.keyCode

1
2
3
4
5
6
7
8
9
10
11
12
13
var input = document.getElementById('input')
   document.body.onkeyup = function(e) {
       e=e||window.event;  
       console.dir(arguments);// KeyboardEvent  
	
	// e.keyCode:当前键盘上每个键对应的值
	// 空格键（space）->32
	// 回退键（Backspace）->8
	// 回车键（Enter）->13
	// 删除键（Del）->46
	// 四个方向键（左上右下）-> 37，38，39，40
	console.log(e.keyCode);       	  	
   }